<template>
  <el-card class="box-card">
    <div class="row header">
      <div class="title">{{ from.title }}</div>
      <div class="content">{{ from.content }}</div>
    </div>
    <div class="content">
      <img v-if="type === 1" src="@/assets/img1.png" width="100%" height="120" alt="良率">
      <img v-else-if="type === 2" src="@/assets/img2.png" width="100%" height="120" alt="OEE">
      <img v-else src="@/assets/img3.png" width="100%" height="120" alt="UDP">
    </div>
    <div class="row bottom">
      <span class="title">{{ from.text }}{{ from.num }}</span>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    type: {
      type: Number,
      default: 1
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      testingColor: '#8EBE47',
      holdColor: '#DBD62F',
      idleColor: '#D5665C',
      from: {},
      fromYield: {
        title: '当前平均良率',
        content: '23930',
        img: 'img1.png',
        text: '历史平均良率：',
        num: '1927423'
      },
      fromOEE: {
        title: '当前平均OEE',
        content: '23930',
        img: 'img2.png',
        text: '历史平均OEE：',
        num: '1927423'
      },
      fromUPD: {
        title: '当前平均UPH',
        content: '23930',
        img: 'img3.png',
        text: '历史平均UPH：',
        num: '1927423'
      }
    }
  },
  watch: {
    type: function(newVal, oldVal) {
      if (newVal === 1) {
        this.from = this.fromYield
      } else if (newVal === 2) {
        this.from = this.fromOEE
      } else if (newVal === 3) {
        this.from = this.fromUPD
      }
    }
  },
  mounted() {
    if (this.type === 1) {
      this.from = this.fromYield
    } else if (this.type === 2) {
      this.from = this.fromOEE
    } else if (this.type === 3) {
      this.from = this.fromUPD
    }
  },
  methods: {
    init(fabInfo) {
      if (this.type === 1) {
        this.from.content = fabInfo.yield.current
        this.from.num = fabInfo.yield.hisAve
      } else if (this.type === 2) {
        this.from.content = fabInfo.oee.current
        this.from.num = fabInfo.oee.hisAve
      } else if (this.type === 3) {
        this.from.content = fabInfo.uph.current
        this.from.num = fabInfo.uph.hisAve
      }
    }
  }
}
</script>

<style lang="scss"  scoped>
.box-card{
    width: 25%;
    margin: 10px 10px;
}
.row{
  color: #9D9999;
}
.header{
    position: relative;
    margin-bottom: -20px;
    .title{
        font-weight: 500;
        margin-bottom: 15px;
    }
    .content{
       font-size: 28px;
        color: black;
        font-weight: 700;
    }
}
.content{
     margin-bottom: 10px;
}

</style>
